<template>
  <div class="tblock-root">
    <div class="top">
      <div class="left">
        <div class="pickerLine">
          <span class="label">日期：</span>
          <DatePicker type="date" class="picker"></DatePicker>
        </div>
        <div class="pickerLine">
          <span class="label">时间：</span>
          <DatePicker type="time" class="picker"></DatePicker>
        </div>
      </div>
      <div class="right">
        <div class="time">{{timeH}}<span class="blink">:</span>{{timeM}}</div>
        <div class="date">{{date}}</div>
        <div class="weekday">{{weekday}}</div>
      </div>
    </div>
    <div class="bottom">
      <input type="text" placeholder="输入你要搜索的内容" v-model="searchText">
      <input type="button" value="搜索">
      <div class="del" @click="searchText = ''">×</div>
    </div> 
  </div>
</template>

<script>
import DatePicker from './DatePicker'
import moment from 'moment'

export default {
  name: 'tblock',
  components: {DatePicker},
  data(){
    return {
      searchText: '',
      timeH: '',
      timeM: '',
      date: '',
      weekday: ''
    }
  },
  mounted(){
    this.upTime()
    setInterval(this.upTime, 10000)
  },
  methods: {
    upTime(){
      let now = moment()
      this.timeH = now.format('HH')
      this.timeM = now.format('mm')
      this.date = now.format('YYYY年MM月DD日')
      this.weekday = '星期' + '日一二三四五六'[now.day()]
    }
  }
}
</script>

<style lang="stylus" scoped>
@keyframes blink
  0%, 60%
    color #cdd4e2
  70%, 100%
    color transparent

.tblock-root
  padding 20px
  box-sizing border-box

.tblock-root>.top
  display flex
  margin-bottom 3px
  >.left
    flex auto
    >.pickerLine
      display flex
      margin-bottom 13px
      >.label
        width 70px
        line-height 38px
        font-size 14px
        flex none
      >.picker
        flex auto
  >.right
    margin-left 3%
    color #cdd4e2
    flex none
    >.time
      font-size 24px
      font-family consolas
      letter-spacing 3px
      line-height 30px
      >.blink
        animation 1s blink infinite linear
    >.date
    >.weekday
      font-size 14px
      line-height 22px
      margin-top 3px
.tblock-root>.bottom
  width 430px
  height 43px
  display flex
  position relative
  input
    outline none
    font-family inherit
    border 0
    color white
    transition all .3s ease
  [type=text]
    border 1px solid rgba(89,179,255,.35)
    border-right 0
    border-top-left-radius 8px
    border-bottom-left-radius 8px
    flex auto
    padding 0 26px
    box-sizing border-box
    background rgba(0,0,0,.5)
    font-size 12px
    &::-webkit-input-placeholder
      color #cdd4e2
    &:hover
    &:focus
      border 1px solid rgba(89,179,255,.7)
      border-right 0
    &:hover + [type=button]
    &:focus + [type=button]
      background rgba(89,179,255,.7)
  [type=button]
    background rgba(89,179,255,.5)
    border-top-right-radius 8px
    border-bottom-right-radius 8px
    width 70px
    cursor pointer
    &:hover
      background rgba(89,179,255,.8)
  .del
    position absolute
    font-size 20px
    top 0
    line-height @height
    right 82px
    color rgba(89,179,255,.5)
    cursor pointer
    &:hover
      color rgba(89,179,255,.8)

</style>